<template>
  <div class="out-style">
    <ach-detail :title="title" isReview="true"></ach-detail>
    <el-form label-width="120px" :model="ruleForm" ref="ruleForm" :rules="rules">
      <el-tabs class="tabs" v-model="tabName" @tab-click="changeTab">
        <el-tab-pane
          v-for="item in trackList"
          :key="item.id"
          :label="item.trackCount"
          :name="item.id + ''"
        >
          <div>
            <p class="divider"></p>
            <div class="mian-title">{{$t('message.fbcx')}}</div>
            <div class="inner-style">
              <el-form-item :label="$t('message.fbxg')+':'">
                <span style="padding-right: 10px;">{{item.publishEffect}}</span>
                <span>{{item.remark}}</span>
              </el-form-item>
              <el-form-item :label="$t('message.cgms')+':'">{{item.resultDesc}}</el-form-item>
              <el-form-item v-if="item.ossUrlList!==0" :label="$t('message.scfj')+':'">
                <down-load :pfileList="item.ossUrlList"></down-load>
              </el-form-item>
            </div>
            <p class="divider"></p>
            <div class="mian-title">{{$t('message.txrxx')}}</div>
            <div class="inner-style">
              <el-form-item :label="$t('message.tbr')+':'">
                <span>{{item.filledBy}}</span>
              </el-form-item>
              <el-form-item :label="$t('message.lxdh')+':'">{{item.phone || '-'}}</el-form-item>
              <el-form-item :label="$t('message.lxdh')+':'">{{item.seatNumber || '-'}}</el-form-item>
            </div>
            <p class="divider"></p>
            <div class="mian-title">{{$t('message.zzsh')}}</div>
            <!--
                    <p class="divider"></p>
                    <div class="mian-title">审核记录</div>
                    <div class="inner-style">
                        <el-form-item label="审核记录:">
                            <div style="padding-top: 8px;">
                                <div v-for="citem in item.trackRecords" :key="citem.trackStatus" style="margin: 0 0 10px 10px; line-height: 24px;">
                                    <p>
                                        <span>{{citem.createTime}}</span>
                                        <span>{{citem.roleName}}</span>
                                    </p>
                                    <p>
                                        审核结果：{{citem.trackStatus}}
                                    </p>
                                    <p>
                                        审核意见：{{citem.trackComments}}
                                    </p>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
            -->
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="(trackList.find(item => item.id === +this.tabName) || {}).showButton">
        <el-form-item :label="$t('message.shyj')+':'" label-width="225px" prop="auditComment">
          <el-input
            style="width: 485px;"
            type="textarea"
            :rows="5"
            :placeholder="$t('message.p-srnr')"
            show-word-limit
            maxlength="512"
            v-model="ruleForm.auditComment"
          ></el-input>
        </el-form-item>
        <div class="btn">
          <button type="button" @click="reject" class="fail">{{$t('message.bnt-bh')}}</button>
          <button type="button" @click="submit('pass')" class="submit">{{$t('message.bnt-shtg')}}</button>
        </div>
      </div>
    </el-form>
  </div>
</template>


<script>
import achDetail from "@components/achDetail.vue";
import downLoad from "@components/uploadFile/downLoad.vue";
export default {
  data() {
    return {
      tabName: "",
      title: this.$t("message.zzsh-title"),
      ruleForm: {
        auditComment: ""
      },
      rules: {
        auditComment: [
          { required: true, message: this.$t("message.m1"), trigger: "blur" },
          { max: 1028, message: this.$t("message.m3"), trigger: "blur" }
        ]
      },
      trackList: [], // 追踪列表
      cfileList2: []
    };
  },
  components: {
    achDetail,
    downLoad
  },
  mounted() {
    document.getElementsByClassName("el-tabs__nav")[0].style["max-width"] =
      "1400px";
    // document.getElementsByClassName("el-tabs__nav")[0].style["overflow-x"] =
    //   "scroll";

    // 审核记录 + 追踪信息回填
    this.$axios
      .get("/api/releaseResultTrack/getInfos", {
        params: {
          id: this.$route.query.id
        }
      })
      .then(res => {
        if (res.code === 200) {
          this.trackList = res.data;
          this.tabName = res.data[0].id + "";
          // if (res.data[0].ossUrlList.length!== ""){
          // 	this.cfileList2 = res.data[0].ossUrlList;
          // }
          // this.trackList.forEach((item,index)=>{
          // 	if (res.data[0].ossUrlList.length!== ""){
          // 		this.cfileList2 = res.data[0].ossUrlList;
          // 	}
          // })
        } else {
          this.$message.error(res.message);
        }
      })
      .catch(err => {
        console.log(err);
      });

    // 审核记录
    // this.$axios.get('/api/releaseResult/resultAuditInfo', {
    // 	params: {
    // 		id: this.$route.query.id,
    // 	},
    // }).then(res => {
    // 	if(res.code === 200){
    // 		this.reviewList = res.data
    // 	}else{
    // 		this.$message.error(res.message)
    // 	}
    // }).catch(err=>{
    // 	console.log(err)
    // })
  },
  methods: {
    changeTab(evt) {
      this.tabName = evt.name;
    },
    // 驳回
    reject() {
      this.$confirm(this.$t("message.qrbhgczzsh"), this.$t("message.ts"), {
        confirmButtonText: this.$t("message.ture"),
        cancelButtonText: this.$t("message.false"),
        type: "warning"
      }).then(res => {
        this.submit("fail");
      });
    },
    submit(type) {
      //提交
      const url =
        type === "pass"
          ? "/api/releaseResultTrack/auditPass" // 通过
          : "/api/releaseResultTrack/auditReject"; // 驳回

      if (
        this.trackList.find(item => item.id === +this.tabName).showButton ===
        false
      ) {
        this.$message.error(this.$t("message.znshdq"));
        return;
      }

      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          const params = {
            // id: this.$route.query.id,
            id: +this.tabName, // 追踪id
            ...this.ruleForm
          };

          this.$axios
            .get(url, {
              params
            })
            .then(res => {
              if (res.code === 200) {
                this.$message.success(this.$t("message.czcg"));

                this.$router.push({
                  path: "/achievements",
                  query: {}
                });
              } else {
                this.$message.error(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          this.$message.error(this.$t("message.m14"));
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.out-style {
  width: 100%;
  background: #fff;
  padding: 60px 120px;
}
.inner-style {
  width: 76%;
  margin: 0 auto;
}
.divider {
  width: 100%;
  border-top: 1px dashed #d9e1e9;
  margin-top: 12px;
}
.mian-title {
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  line-height: 16px;
  font-size: 16px;
  border-left: 4px solid #fe8c01;
  padding-left: 10px;
  margin: 12px 0 24px 0;
}
h2 {
  margin: 0 0 30px;
  font-size: 18px;
  text-align: center;
}
.el-form-item {
  margin-bottom: 16px;
}
.spanStyle {
  margin-left: 16px;
  margin-right: 4px;
  font-size: 14px;
  color: #606266;
}

.btn {
  text-align: center;
  margin: 40px 0 50px 0;
}
.submit {
  width: 171px;
  height: 40px;
  color: rgba(255, 255, 255, 1);
  border: none;
  background: linear-gradient(
    90deg,
    rgba(255, 192, 2, 1) 0%,
    rgba(254, 140, 1, 1) 100%
  );
}
.fail {
  width: 171px;
  height: 40px;
  margin-right: 46px;
  border: 1px solid rgba(151, 151, 151, 1);
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  background-color: #ffffff;
}
.tabs {
  ::v-deep .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background-color: #e4e7ed;
    z-index: 1;
  }
  ::v-deep .el-tabs__header{
      line-height: 88px !important;
    }
  ::v-deep .el-tabs__active-bar{
      transform: translateY(-25px) !important;
  }
}
</style>